import 'package:flutter/material.dart';
import '../model/post.dart';

class ViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridViewBuileDemo();
  }
}

class GridViewBuileDemo extends StatelessWidget {
  Widget _gridItemBuilder(BuildContext context, int index) {
    int i=(index)%3;
    return Stack(

      children: [

        SizedBox.expand(
          child: Image.network(



            posts[i].imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
            bottom: 0,
            left: 0,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  posts[i].title,
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text(posts[i].author),
              ],
            ))
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.builder(
      padding: EdgeInsets.all(20),
      itemCount: posts.length*10,
      itemBuilder: _gridItemBuilder,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
    );
  }
}

class GridViewExtentDemo extends StatelessWidget {
  List<Widget> _buildTiles(int length) {
    return List.generate(
      length,
      (index) => Container(
        color: Colors.black12,
        alignment: Alignment.center,
        child: Text(
          'item$index',
          style: TextStyle(
            color: Colors.black,
            fontSize: 18,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.extent(
      maxCrossAxisExtent: 120,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      scrollDirection: Axis.vertical,
      children: _buildTiles(100),
    );
  }
}

class GridViewCountDemo extends StatelessWidget {
  List<Widget> _buildTiles(int length) {
    return List.generate(
      length,
      (index) => Container(
        color: Colors.black12,
        alignment: Alignment.center,
        child: Text(
          'item$index',
          style: TextStyle(
            color: Colors.black,
            fontSize: 18,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      crossAxisCount: 3,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      scrollDirection: Axis.horizontal,
      children: _buildTiles(100),
    );
  }
}

class PageViewBuildDemo extends StatelessWidget {
  Widget _pageItemBuilder(BuildContext context, int index) {
    return Stack(
      children: [
        SizedBox.expand(
          child: Image.network(
            posts[index].imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
            bottom: 0,
            left: 0,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  posts[index].title,
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text(posts[index].author),
              ],
            ))
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PageView.builder(
      controller: PageController(
        initialPage: 1,
        keepPage: false,
        viewportFraction: 0.8,
      ),
      itemBuilder: _pageItemBuilder,
      itemCount: posts.length,
    );
  }
}

class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PageView(
      // pageSnapping: false,
      // reverse: true,
      // scrollBehavior: Axis.vertical,
      onPageChanged: (currentPage) => debugPrint("Page: $currentPage"),
      controller: PageController(
        initialPage: 1,
        keepPage: false,
        viewportFraction: 0.8,
      ),

      children: [
        Container(
          color: Colors.brown,
          alignment: Alignment.topLeft,
          child: Text(
            "data",
            style: TextStyle(fontSize: 20, color: Colors.red),
          ),
        ),
        Container(
          color: Colors.blue,
          alignment: Alignment(1.0, 0.0),
          child: Text(
            "data321",
            style: TextStyle(fontSize: 20, color: Colors.red),
          ),
        )
      ],
    );
  }
}
